$(function () {
    // console.log(123);
  let stste ='已发布'

  // 点击 发布按钮
  $('.btn_pub').on('click', function () {
    state='已发布'
  })

  // 点击 存草稿按钮
  $('.btn_cg').on('click', function () {
    state = '草稿'
  })
  
  // 校验文章标题规则
  layui.form.verify({
    utitle:[/^.{1,30}$/,'请输入1-30个字符']
  })

  // 封装一个获取服务器的文章类名
  function classes() {
    // console.log(123);
    axios.get('/my/cate/list').then(({ data: res }) => {
      // console.log(res.data);
      if (res.code === 0) {
    // 定义一个空数组 
    const rows = []
    // 遍历数组
    res.data.forEach(item => {
    // 每次遍历的值插入到空数组中
    rows.push(`
              <option value="${item.id}">${item.cate_name}</option>`)
    })
    // 向后插入到下拉区域中
    $('.cate_id').append(rows)

    // 找到对应的区域加 lay-ignore 不美化 参考layui文档
    $('.ql-toolbar select').attr('lay-ignore', '')
        
    // 重新渲染下拉菜单
    layui.form.render('select')

    // 隐藏富文本区域的下拉框
    $('.ql-toolbar select').hide()
      }
    })
  }

  // 调用函数
  classes()

  
   // 给富文本的功能区添加更多功能 参考quill文档
   var toolbarOptions = [
    
    ['bold', 'italic', 'underline', 'strike','image'],        // toggled buttons
    ['blockquote', 'code-block'],
  
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction
  
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
  
    ['clean']                                         // remove formatting button
  ];
  
//  封装渲染富文本区域
  var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: toolbarOptions
    }
  })


  // 注册点击触发input表单事件
  let file = null
  function inputButton() {

    $('.btn-choose-img').on('click', function () {

    $('#file').click()
    
    $('#file').on('change', function (e) {
      // 获取图片信息 （伪数组）
      const files = e.target.files
      console.log(files);
      // 判断伪数组产长度是否为0 
      if(files.length === 0 ) return
      file = files[0]
      // 如果用户选择了图片 则把图片渲染到页面的img标签中
      // URL.createObjectURL() 函数接受一个文件 返回值是这个文件的URL地址
      const imgURL =URL.createObjectURL(files[0])

    // 把接受到的图片的路径插入到图片的src属性
      $('#image').attr('src', imgURL)  
    })
  })
  }

  // 调用触发input函数
  inputButton()
  

  // 封装发布新文章  监听form的submit事件
    $('.form-pub').on('submit', function (e) {
      // 阻止浏览器默认行为
      e.preventDefault()

      // 判断是否有图片
      if (!file) {
        return layer.msg('请选择封面图片')
      }
      // 定义一个空数组
      const fd = new FormData()

      const int_v = $('.form-pub').serialize()
      // 得到title的值
      const title_v = $('[name="title"]').val()
      // 得到cate_id的值
      const cate_id = $('[name="cate_id"]').val()
      // 得到富文本的值
      // const int_t = $('#editor').text()

      fd.append('title', title_v)

      fd.append('cate_id', cate_id)
      // 获取富文本的内容 通过富文本身上的方法 因为是DOM对象 使用innterHTML
      fd.append('content', quill.root.innerHTML)
      // 在头部默认了state 之后注册了点击事件修改state的值
      fd.append('state', state)
      
      fd.append('cover_img',file)
      
      // 提交post请求
      axios.post('/my/article/add', fd).then(({ data: res }) => {
        if (res.code === 0) {
          // 跳转到文章列表区域
          location.href = '/art/art_second.html'

          // 调用封装的高亮函数
          window.parent.heightList('文章列表')
        }
      })
    })
})